<template>
  <div class="studentDetail">
    <div class="studentDetail-header">
      <div class="studentDetail-headertop">
        {{ '2024-2025学年基础工作情况' }}
        <span>待完成</span>
      </div>
      <el-breadcrumb separator="/" class="studentDetail-headerbottom">
        <el-breadcrumb-item :to="{ path: '/mentor/mentorBasic/proceed' }">任务列表</el-breadcrumb-item>
        <el-breadcrumb-item>填报详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="studentDetail-main">
      <div class="studentDetail-main-top">
        <div style="font-weight: 550; font-size: 25px;">
          {{ '天津理工大学期末基础工作情况' }}</div>
        <div style="color: #8a8a8b; text-align: center; margin: 26px 0; font-size: 18px;;">
          {{ '时间：2025/06/11-2025/07/11' }}</div>
      </div>
      <el-form
        ref="studentDetailFormRef"
        class="studentDetailForm"
        :model="studentDetailForm"
        :rules="studentDetailrules"
        label-width="120px"
        label-position="left"
      >
    

        <!-- 基本情况 -->
        <div class="studentDetail-main-subject">
          <div class="studentDetailTitle">基本要求</div>
          <div class="titleDetail">按时参加学业导师相关工作，按照学业导师工作职责和相关要求完成工作，设定学期工作计划，每月至少与学生线下见面一次，
            定期记录并总结学生的日常表现情况和教育管理资料数据，按照要求递交相关材料。协助学院做好就业指导工作，指导学生形成正确的就业观念。
          </div>
          <el-form-item label="支撑材料" prop="zccl">
            <el-upload
              class="set-upload"
              drag
              :file-list="basicFiles"
              :auto-upload="false"
              multiple
              name="file"
              @change="handlebasicChange"
            >
              <el-icon class="el-icon--upload">+</el-icon>
              <div class="el-upload__text">
                点击或拖拽文件到此处上传
              </div>
            </el-upload>
          </el-form-item>
        </div>

        <!-- 学生思想引领 -->
        <div class="studentDetail-main-subject">
          <div class="studentDetailTitle">学生思想引领</div>
          <div class="titleDetail">以严谨求实的治学态度、追求卓越的学术精神和高尚的道德情操言传身教、感染学生，
            帮助学生坚定理想信念、厚植家国情怀，养成良好的道德品质和行为习惯。
          </div>
          <el-form-item label="支撑材料" prop="zccl">
            <el-upload
              class="set-upload"
              drag
              :file-list="thinkFiles"
              :auto-upload="false"
              multiple
              name="file"
              @change="handlethinkChange"
            >
              <el-icon class="el-icon--upload">+</el-icon>
              <div class="el-upload__text">
                点击或拖拽文件到此处上传
              </div>
            </el-upload>
          </el-form-item>
        </div>

        <!-- 学生学业规划 -->
        <div class="studentDetail-main-subject">
          <div class="studentDetailTitle">学生学业规划</div>
          <div class="titleDetail">根据不同学习阶段分别指导计划，帮助学生明确发展目标和发展路径，做好学业规划和学习指导。
            坚持因材施教，帮助学生明确个人兴趣与优势，提高自主学习能力，实现个性化学习成长。
          </div>
          <el-form-item label="支撑材料" prop="zccl">
            <el-upload
              class="set-upload"
              drag
              :file-list="studyFiles"
              :auto-upload="false"
              multiple
              name="file"
              @change="handlestudyChange"
            >
              <el-icon class="el-icon--upload">+</el-icon>
              <div class="el-upload__text">
                点击或拖拽文件到此处上传
              </div>
            </el-upload>
          </el-form-item>
        </div>

        <!-- 学生职业规划 -->
        <div class="studentDetail-main-subject">
          <div class="studentDetailTitle">学生职业规划</div>
          <div class="titleDetail">结合本行业、本领域人才需求、专业人才培养方案以及学生个人意愿，为学生开展职业生涯规划指导，引领学生树立正确就业观，
            积极为学生拓宽就业创业视野、渠道和资源，鼓励学生扎根天津、服务京津冀协同发展。
          </div>
          <el-form-item label="支撑材料" prop="zccl">
            <el-upload
              class="set-upload"
              drag
              :file-list="careerFiles"
              :auto-upload="false"
              multiple
              name="file"
              @change="handlecareerChange"
            >
              <el-icon class="el-icon--upload">+</el-icon>
              <div class="el-upload__text">
                点击或拖拽文件到此处上传
              </div>
            </el-upload>
          </el-form-item>
        </div>

        <!-- 学生科研成果 -->
        <div class="studentDetail-main-subject">
          <div class="studentDetailTitle">学生科研成果</div>
          <div class="titleDetail">引导学生了解学科专业前沿和发展动态，积极组织学生参加学术沙龙、科研课题研讨与各类创新实践等活动，
            指导学生掌握基本学术技能，创造条件让学生及进入课题组、实验室，与研究生共同开展科研活动，积极发表学术论文、专利、软件著作权等。
            指导学生申报、参与各级各类大学生创新创业训练计划项目、创新创业赛事，全面提升创新创业能力及成果转化能力。
          </div>
          <el-form-item label="支撑材料" prop="zccl">
            <el-upload
              class="set-upload"
              drag
              :file-list="paperFiles"
              :auto-upload="false"
              multiple
              name="file"
              @change="handlepaperChange"
            >
              <el-icon class="el-icon--upload">+</el-icon>
              <div class="el-upload__text">
                点击或拖拽文件到此处上传
              </div>
            </el-upload>
          </el-form-item>
        </div>

        
        <el-form-item style="margin: auto;">
          <el-button type="primary" @click="submitForm"
          style="width: 40%; margin: 20px; margin-left: 15%;min-width: 200px; height: 40px; font-size: 22px;border-radius: 10px; background-color: #687bd5;"
          >
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { useMentorBasicStore } from '@/stores/mentor/mBasic'
import { post } from '@/utils/request'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const mentorBsasicStore = useMentorBasicStore()

const baseWorkId = route.query.id

// 添加上传组件的引用
const basicFiles = ref([])
const thinkFiles = ref([])
const studyFiles = ref([])
const careerFiles = ref([])
const paperFiles = ref([])

// 文件变更处理函数
const handlebasicChange = (file, fileList) => {
  basicFiles.value = fileList
}

const handlethinkChange = (file, fileList) => {
  thinkFiles.value = fileList
}

const handlestudyChange = (file, fileList) => {
  studyFiles.value = fileList
}
const handlecareerChange = (file, fileList) => {
  careerFiles.value = fileList
}
const handlepaperChange = (file, fileList) => {
  paperFiles.value = fileList
}



// 提交表单
const submitForm = async () => {

  try {
    const formData = new FormData()
    formData.append('baseWorkId',baseWorkId)

    if (basicFiles.value.length > 0) {
      basicFiles.value.forEach((file, index) => {
        formData.append(`basicRequirement`, file.raw)
      })
    }
    if (thinkFiles.value.length > 0) {
      thinkFiles.value.forEach((file, index) => {
        formData.append(`basicRequirement`, file.raw)
      })
    }
    if (studyFiles.value.length > 0) {
      studyFiles.value.forEach((file, index) => {
        formData.append(`basicRequirement`, file.raw)
      })
    }
    if (careerFiles.value.length > 0) {
      careerFiles.value.forEach((file, index) => {
        formData.append(`basicRequirement`, file.raw)
      })
    }
    if (paperFiles.value.length > 0) {
      paperFiles.value.forEach((file, index) => {
        formData.append(`basicRequirement`, file.raw)
      })
    }
    await post('/teacher/basework/getdetails',formData)
    ElMessage.success('填报成功')

  } catch (error) {
    console.log(error)  
  }
}
</script>

<style scoped>
.studentDetail {
  width: 100%;
  height: 100%;
  position: relative;
  .studentDetail-header {
    width: 100%;
    height: 16vh;
    position: sticky;
    top: 0px;
    .studentDetail-headertop {
      width: 100%;
      height: 8vh;
      background-color: #fff;
      border-top: 1px solid #c9c9ca;
      line-height: 8vh;
      font-size: 18px;
      font-weight: 700;
      padding: 0 30px;
      span {
        color: #b31219;
        font-size: 22px;
        font-weight: normal;
        margin-left: 20px;
      }
    }
    .studentDetail-headerbottom {
      width: 100%;
      height: 8vh;
      line-height: 8vh;
      padding: 0 40px;
      font-size: 18px;
      :deep(.el-breadcrumb__inner) {
        font-weight: normal;
        color: #7f7f7f;
      }
    }
  }

  .studentDetail-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .studentDetailForm {
      width: 90%;
      .studentDetail-main-subject {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        padding-top: 20px;
        margin: 20px 0;
      }
    }
  }
}
.studentDetailTitle {
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 10px;
  margin-left: -45%;
}
.titleDetail {
  width: 60%;
  max-width: 600px;
  min-width: 50px;
  margin-left: -8%;
  margin-bottom: 20px;
  font-size: 14px;
}
.el-form-item {
  width: 60%;
  margin-bottom: 30px;
  margin-left: -3%;
}
:deep(.el-form-item__label) {
  font-size: 18px;
  color: black;
  margin-left: 30px;
}
:deep(.el-radio__label) {
  font-size: 15px;
  color: #7f7f7f;
}
/* :deep(.el-input__wrapper) {
  background-color: #f2f3f5;
} */

:deep(.el-textarea),
:deep(.el-input),
:deep(.el-select)
 {
  max-width: 300px;
  min-width: 200px;
}
.set-upload {
  width: 100%;
}
:deep(.el-upload-dragger){
  max-width: 450px;
  min-width: 200px;
  padding: 0px;
}
:deep(.el-textarea__inner),
:deep(.el-select__wrapper),
:deep(.el-upload-dragger),
:deep(.el-input__wrapper) {
  background-color: #f2f3f5;
}
</style>